<template>
  <div>
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <router-link tag="div" to="/goods" class="tab-item">商品</router-link>
      <router-link tag="div" to="/ratings" class="tab-item">评价</router-link>
      <router-link tag="div" to="/seller" class="tab-item">商家</router-link>
    </div>
    <router-view :seller="seller" :goods="goods" :ratings="ratings"></router-view>
  </div>
</template>

<script>
import axios from 'axios'
import Header from 'components/header/Header'
export default {
  name: 'App',
  components: {
    'v-header': Header
  },
  data () {
    return {
      seller: {},
      goods: [],
      ratings: []
    }
  },
  methods: {
    getSellerInfo () {
      axios.get('/api/data.json').then(this.getSellerInfoSuccess)
    },
    getSellerInfoSuccess (res) {
      const data = res.data
      this.seller = data.seller
    }
  },
  mounted () {
    this.getSellerInfo()
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/styles/mixins.styl'
  @import '~common/styles/varibles.styl'
  .tab
    display flex
    border-1px(rgba(7,17,27,0.1))
    .tab-item
      flex 1
      height 40px
      line-height 40px
      font-size 14px
      color rgb(77,85,93)
      text-align center
    .router-link-active
      color rgb(240,20,20)
</style>
